<template>
  <div>
    <div class="pageTitleWhole">
      <a-breadcrumb>
        <a-breadcrumb-item>
          <router-link to="/landCenter/orderManage">订单管理</router-link>
        </a-breadcrumb-item>
        <a-breadcrumb-item>订单详情</a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <div style="margin: 24px;">
      <a-card>
        <div class="card-title hasContent">基本信息</div>
        <div class="row">
          <div class="headerContent">
            <a-descriptions :column="2" class="terDa1">
              <a-descriptions-item label="客户名称">{{detail.custName}}</a-descriptions-item>
              <a-descriptions-item label="是否加急">{{detail.isUrgent===1?'是':'否'}}</a-descriptions-item>
              <a-descriptions-item label="货名">{{detail.goodsName}}</a-descriptions-item>
              <a-descriptions-item label="结算类型">{{checkSettlementTypeName(detail.settlementType)}}</a-descriptions-item>
              <a-descriptions-item label="箱型">{{detail.containerType}}</a-descriptions-item>
              <a-descriptions-item label="发票">{{invoiceStr}}</a-descriptions-item>
              <a-descriptions-item label="箱量">
                {{detail.containerNum}}
                <a-button
                  type="link"
                  @click="completeBox"
                  style="line-height:21px; height:21px;"
                >箱号，封号</a-button>
              </a-descriptions-item>
              <a-descriptions-item label="海船公司">{{detail.seagoingShipCompanyName || '--'}}</a-descriptions-item>
            </a-descriptions>
          </div>
        </div>
      </a-card>

      <a-card>
        <div class="card-title hasContent">订单信息</div>
        <div class="row">
          <div class="headerContent">
            <a-descriptions :column="2" class="terDa1">
              <a-descriptions-item label="订单类型">{{orderTypeStr(detail.orderType)}}</a-descriptions-item>
              <a-descriptions-item label="运单号">{{detail.seagoingShipOrderCode || '--'}}</a-descriptions-item>
              <a-descriptions-item label="起运港">{{detail.startPortName || '--'}}</a-descriptions-item>
              <a-descriptions-item label="目的港">{{detail.endPortName || '--'}}</a-descriptions-item>
              <a-descriptions-item label="驳船船名">{{detail.shipName || '--'}}</a-descriptions-item>
              <a-descriptions-item label="驳船航次">{{detail.shipVoyage || '--'}}</a-descriptions-item>
              <a-descriptions-item label="海船船名">{{detail.seagoingShipName || '--'}}</a-descriptions-item>
              <a-descriptions-item label="海船航次">{{detail.seagoingShipVoyage || '--'}}</a-descriptions-item>
            </a-descriptions>
          </div>
        </div>
      </a-card>

      <a-card>
        <div class="card-title hasContent">运输信息</div>
        <div class="row">
          <div class="headerContent" style="margin:0 3%;">
            <a-descriptions :column="1">
              <a-descriptions-item label="门点信息"></a-descriptions-item>
              <a-descriptions-item>
                <a-table
                  :columns="columns"
                  :data-source="tableData"
                  size="small"
                  :pagination="false"
                  rowKey="addressId"
                />
              </a-descriptions-item>
              <a-descriptions-item label="要求送达时间">{{detail.requiredArriveTime}}</a-descriptions-item>
              <a-descriptions-item label="备注">{{detail.remark}}</a-descriptions-item>
            </a-descriptions>
          </div>
        </div>
      </a-card>

      <!-- 费用信息 -->
      <a-card>
        <div class="card-title hasContent">费用信息</div>
        <a-row>
          <a-col :span="22" :offset="1">
            <a-col :span="14">
              <p style=" font-size: 16px; color: rgba(0, 0, 0, 0.85);">
                <img :src="ys" style="margin-right:5px;" /> 应收
              </p>
              <a-descriptions :column="2">
                <a-descriptions-item
                  label="应收客户（元/箱）"
                >{{detail.receivableCustAmount}} {{detail.receivableCustCurrency}}</a-descriptions-item>
              </a-descriptions>
            </a-col>
          </a-col>
          <a-col :span="22" :offset="1">
            <a-col :span="14">
              <p style=" font-size: 16px; color: rgba(0, 0, 0, 0.85);">
                <img :src="yf" style="margin-right:5px;" /> 应付
              </p>
              <a-descriptions :column="2">
                <a-descriptions-item label="保险费(元/箱)">{{detail.payableInsuranceAmount}}</a-descriptions-item>
              </a-descriptions>
            </a-col>
          </a-col>
        </a-row>
      </a-card>

      <a-card>
        <div class="card-title hasContent">合同信息</div>
        <div class="row">
          <div class="headerContent">
            <a-descriptions :column="1">
              <a-descriptions-item>
                <viewer :images="contractPicsArr" :options="{url: 'data-x'}">
                  <template v-for="(src,index) in contractPicsArr">
                    <img
                      style="width:100px;height:100px;margin-right:10px;border:1px solid #eee"
                      :src="`${src}?x-oss-process=image/resize,h_100`"
                      :data-x="src"
                      :key="index"
                      v-if="src"
                    />
                  </template>
                </viewer>
              </a-descriptions-item>
            </a-descriptions>
          </div>
        </div>
      </a-card>
    </div>

    <!-- 箱号，封号modal -->
    <boxInfoView :visible="boxVisible" :data="boxData" @setVisible="setBoxData" />
  </div>
</template>

<script>
import { mixin } from '@/common/settlement2'
import { StringifyFuc, InvoiceOptions, OrderOptions } from '../options'
import 'viewerjs/dist/viewer.css'
import ys from '@@/images/ys.png'
import yf from '@@/images/yf.png'
import boxInfoView from '../boxInfoViewModal'
import { queryJiateOrderAuditDetail } from '@/api/landCenter'

export default {
  props: ['id'],
  mixins: [mixin],
  data () {
    const columns = [
      {
        title: '港口/门点地址',
        customRender: (text, record, index) => {
          if (record.addressType === 1) {
            return <div>{record.portName} <span class='gangIcon'>港</span></div>
          } else if (record.addressType === 2) {
            return `${record.province}${record.city}${record.area}${record.address}`
          }
        }
      },
      { title: '联系人', dataIndex: 'linkMan' },
      { title: '联系人电话号码', dataIndex: 'linkManPhone' },
      {
        title: '类型',
        dataIndex: 'opeType',
        customRender: (text, record, index) => {
          return text === 1 ? '装货' : (text === 2 ? '卸货' : '提箱')
        }
      },
      { title: '备注', dataIndex: 'remark', ellipsis: true }
    ]

    return {
      ys,
      yf,
      labelCol: { span: 6 },
      wrapperCol: { span: 18 },
      detail: {
        contractPics: ''
      },
      columns,
      tableData: [],
      // 箱号,封号modal
      boxData: [],
      boxVisible: false
    }
  },
  components: {
    boxInfoView
  },
  computed: {
    invoiceStr () {
      const invoiceTypeStr = StringifyFuc(this.detail.invoiceType, InvoiceOptions)
      return invoiceTypeStr ? `${invoiceTypeStr} ${this.detail.taxRate}%` : '不开票'
    },
    contractPicsArr () {
      return this.detail.contractPics ? this.detail.contractPics.split(',') : []
    }
  },
  methods: {
    orderTypeStr (key) {
      const t = OrderOptions.filter(v => v.key === key)[0]
      if (t) return t.title
      return '--'
    },
    completeBox () {
      this.boxVisible = true
    },
    setBoxData (value) {
      this.boxVisible = false
    }
  },
  mounted () {
    this.$nextTick(() => {
      queryJiateOrderAuditDetail({ orderJiateId: this.id }).then(rsp => {
        this.detail = rsp.data
        this.tableData = rsp.data.addressList
        this.boxData = rsp.data.containerList
      })
    })
  }
}
</script>

<style lang="less" scoped>
.ant-card {
  position: relative;
  margin-bottom: 24px;
  border: none;
  .cardEdit {
    position: absolute;
    right: 24px;
    top: 24px;
    z-index: 2;
  }
  .card-title {
    position: relative;
    padding-left: 16px;
    font-size: 18px;
    line-height: 1;
    color: #000;
    &:before {
      content: '';
      width: 5px;
      height: 18px;
      background: #1890ff;
      border-radius: 4px;
      position: absolute;
      left: 0;
      top: -1px;
    }
  }
  .hasContent {
    margin-bottom: 20px;
  }
}

.clickOnlyInput {
  width: 150px;
  height: 32px;
  padding: 4px 11px;
  color: rgba(0, 0, 0, 0.65);
  font-size: 14px;
  line-height: 1.5;
  background-color: #fff;
  background-image: none;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
}
</style>
<style lang="less" scoped>
.terDa1 .ant-descriptions-item-colon {
  float: left;
  width: 40%;
  text-align: right;
}
.terDa1 .content {
  line-height: 30px !important;
}
.terDa2 .term {
  float: left;
  width: 10%;
  line-height: 30px !important;
  margin-right: 0 !important;
}
.terDa2 .content {
  line-height: 30px !important;
}
</style>
